<!-- 发布需求 页面 -->
<template>
	<view class="problem-box">
		<u-form :model="formData">
			<!-- 顶部具体需求区域 -->
			<view class="content-box">
				<view class="title">具体需求</view>
				<scroll-view :scroll-y="true" class="text">
					<u-input height="244" v-model="formData.content" maxlength="9999" placeholder="请填写您的需求描述" :clearable="false" type="textarea" />
				</scroll-view>
			</view>
			<!-- 上传图片视频区域 -->
			<view class="content-box">
				<view class="title">请上传视频/图片</view>
				<view class="file-item-box">
					<view class="video-box" v-if="uploadVideoUrl">
						<video class="video-size" :src="uploadVideoUrl" controls></video>
						<view class="delete-box" @click.stop="deleteImageClick(-1)">
							<u-icon name="close" color="#FFF" size="26"></u-icon>
						</view>
					</view>
					<view class="img-item" v-for="(img, index) in fileList" :key="index" @click="previewImageClick(index)">
						<u-image width="220" height="220" :src="img"></u-image>
						<view class="delete-box" @click.stop="deleteImageClick(index)">
							<u-icon name="close" color="#FFF" size="26"></u-icon>
						</view>
					</view>
				</view>
				<u-button slot="addBtn" @click="selectUploadType" v-if="uploadBtnShow">{{uploadTip || '选择类型'}}</u-button>
				<u-action-sheet :list="list" v-model="show" @click="choiceUpload"></u-action-sheet>
			</view>
			<!-- 发布问题按钮区域 -->
			<view class="pro-btn"><u-button :custom-style="submitBtn" @click="submit">发布问题</u-button></view>
		</u-form>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 律师不同于古代的讼师、状师，是指通过国家司法考试并依法取得律师执业证书，接受委托或者指定，为当事人提供法律服务的执业人员。按照工作性质划分，律师可分为专职律师与兼职律师，按照业务范围划分，律师可分为民事律师、刑事律师和行政律师，按照服务对象...
			formData: {
				content: '',
				video_url: '',	// 视频地址，带不带域名都可以
				photo_url: [],	// 图片数组
			},
			rules: {
				text: [
					{
						required: true,
						message: '需求描述不能为空哦',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				]
			},
			// 要上传的图片列表
			fileList: [],
			uploadVideoUrl: '',		// 上传的视频的播放路径
			// 上传文件框中的提示文字，根据用户选择的类型动态提示
			uploadTip: '',
			list: [
				{
					text: '图片'
				},
				{
					text: '视频'
				}
			],
			show: false,
			submitBtn: {
				backgroundColor: '#00C9B1',
				color: '#FFFFFF',
				fontSize: '32rpx'
			},
			uploadBtnShow: true,	// 控制上传按钮的显示与隐藏
		};
	},
	watch: {
		// 监听图片列表，如果图片数量达到 6 张则隐藏上传的按钮
		fileList(arr) {
			// console.log('已上传图片数：', arr.length);
			if(arr.length >= 6) return this.uploadBtnShow = false
			this.uploadBtnShow = true
			if(arr.length === 0) {
				this.uploadTip = ''
			}
		},
		// 视频只能上传一个，如果上传了就隐藏继续上传的按钮
		uploadVideoUrl(url) {
			if(url) return  this.uploadBtnShow = false
			this.uploadBtnShow = true
		}
	},
	methods: {
		// 判断是否需要打开选择文件类型的弹框
		selectUploadType() {
			if(!this.fileList.length && !this.uploadVideoUrl) return this.show = true
			this.choiceUpload(0)
			
		},
		// 选择上传文件类型（图片视频二选一）0 为 图片，1 为 视频
		async choiceUpload(index) {
			if (index === 0) {
				this.uploadTip = '选择图片';
				// 打开图片上传组件
				this.chooseImages();
			} else {
				this.uploadTip = '选择视频';
				// 打开视频上传组件
				this.chooseVideo();
			}
		},
		// 发布按钮的点击事件
		async submit() {
			console.log(this.formData);
			if(!this.formData.content && !this.formData.video_url && !this.formData.photo_url.length) return this.$u.toast('发布内容不能为空')
			const res = await this.$u.api.postCase(this.formData)
			if(!res) return this.$u.toast('发布失败，请稍后重试')
			// 发布成功
			this.formData.content = ''
			this.formData.video_url = ''
			this.formData.photo_url = []
			this.fileList = []
			this.uploadVideoUrl = ''
			this.uploadBtnShow = true
			this.$u.vuex('vuex_isSubmit', true)
			this.$u.route({
				type: 'back',
			})
			this.$u.toast('帖子发布成功!')
		},
		// 预览图片
		previewImageClick(index) {
			uni.previewImage({
				current: index,
				urls: this.fileList,
				indicator: 'none'
			})
		},
		// 删除图片或者视频
		deleteImageClick(index) {
			// 如果 index === -1 则删除的是视频
			if(index === -1) {
				this.formData.video_url = ''
				this.uploadVideoUrl = ''
				this.uploadTip = ''
				this.$u.toast('已移除该视频')
			} else {
				this.formData.photo_url.splice(index, 1)
				this.fileList.splice(index, 1)
				this.$u.toast('已移除该图片')
			}
			
		},
		// 上传图片
		async chooseImages() {
			uni.showLoading({
				mask: true,
				title: '上传中...'
			})
			// uploadFile 存储需要上传的文件
			let uploadFile = ''
			// 1.选择图片（只能单选最多六张）
			const res = await uni.chooseImage({
				count: 1,	// 最多可以选择的图片张数，默认9
				// sizeType: ['compressed'],		// original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album'],		// album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
			});
			// console.log('res:', res);
			if(res.length < 2) {		// 小于2则没有选择图片
				uni.hideLoading()
				return
			}
			uploadFile = res[1].tempFilePaths[0];	// 拿到选择的文件
			var that1 = this;
			// 2.将选择的图片上传到目标服务器
			const arr = await uni.uploadFile({
				// 需要上传的地址
				url: that1.vuex_uploadAction,
				// filePath  需要上传的文件
				filePath: uploadFile,
				name: 'file',
				timeout: 2000,		// 超时时间
				header: {		// HTTP 请求 Header, header 中不能设置 Referer。
					token: that1.vuex_token		// 挂载请求头为用户的 token
				},
			});
			// console.log(arr);
			let data = JSON.parse(arr[1].data)
			console.log('data:', data);
			if(data.code !== 1) {	// 图片上传失败了
				uni.hideLoading()
				that1.$u.toast(data.msg)
				return
			}
			// 上传成功(把上传成功后的文件路径 push 到页面需要显示的图片数据列表中)
			that1.fileList.push(data.data.fullurl)
			that1.formData.photo_url.push(data.data.url)
			// console.log(that1.fileList);
			uni.hideLoading()
		},
		// 上传视频
		async chooseVideo() {
			uni.showLoading({
				mask: true,
				title: '上传中...'
			})
			// uploadFile 存储需要上传的文件
			let uploadFile = ''
			// 1.选择要上传的视频
			const res = await uni.chooseVideo({
				maxDuration: 60,		// 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
				sourceType: ['album'],		// album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
			});
			uploadFile = res[1].tempFilePath;
			// console.log(uploadFile);
			var that2 = this;
			// 2.上传所选视频到服务器
			const arr = await uni.uploadFile({
				// 需要上传的地址
				url: that2.vuex_uploadAction,
				// filePath  需要上传的文件
				filePath: uploadFile,
				name: 'file',
				header: {
					token: that2.vuex_token		// 挂载请求头为用户的 token
				},
			});
			let data = JSON.parse(arr[1].data)
			console.log('data:', data);
			if(data.code !== 1) {		// 视频上传失败了
				uni.hideLoading()
				that1.$u.toast(data.msg)
				return
			}
			// 上传成功(把上传成功后的文件路径 push 到页面需要显示的视频数据列表中)
			that2.uploadVideoUrl = data.data.fullurl
			that2.formData.video_url = data.data.url
			uni.hideLoading()
		}
	}
};
</script>

<style lang="scss" scoped>
.problem-box {
	min-height: calc(100vh - 80rpx);
	// #ifdef H5
	min-height: calc(100vh - 168rpx);
	// #endif
	background-color: #f4f6fa;
	.content-box {
		margin-top: 20rpx;
		// min-height: 385rpx;
		background-color: #ffffff;
		padding: 20rpx;
		.title {
			font-weight: 700;
			line-height: 80rpx;
			font-size: 32rpx;
			color: #141418;
		}
		.file-item-box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			.img-item {
				width: 33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				position: relative;
				.delete-box {
					position: absolute;
					top: -15rpx;
					right: -5rpx;
					width: 40rpx;
					height: 40rrpx;
					border-radius: 50%;
					line-height: 40rpx;
					text-align: center;
					background-color: #EF0000;
				}
			}
			.video-box {
				width: 100%;
				height: 600rpx;
				position: relative;
				.video-size {
					width: 100%;
					height: 100%;
				}
				.delete-box {
					position: absolute;
					top: -15rpx;
					right: -15rpx;
					width: 40rpx;
					height: 40rrpx;
					border-radius: 50%;
					line-height: 40rpx;
					text-align: center;
					background-color: #EF0000;
				}
			}
		}
		.text {
			width: 100%;
			height: 264rpx;
			font-size: 30rpx;
			color: #141418;
		}
	}

	.pro-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #00c9b1;
	}
}
</style>
